<template>
  <div class="Echarts" style="width: 100%;">
    <div :id="id" style="width: 100%;height:400px;"></div>
  </div>
</template>

<script>
export default {
  name: 'Lines',
  computed: {
  },
  data() {
    return {
      id: `${new Date().getTime()}_${Math.random() * 100}`
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init(xData, yData) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.id));

      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel:{
            interval: 0, // X轴信息全部展示
            rotate: xData && xData.length > 12 ? 30 : 0, // 60 标签倾斜的角度
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: yData,
          type: 'line',
          smooth: true
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
}
</script>

<style>
</style>
